@import "constants";

html, body {
    margin: 0;
    padding: 0;

	font-size: 16px;
	line-height: 1rem;
    font-family: Verdana,Helvetica,Arial,sans-serif;

	color: $normal_fg;
	background-color: $normal_bg;

    @media (max-width: $small-max) {
        font-size: 20px;
    }
}

#map-container {
    position: absolute;

    width: 100%;
    height: 100%;
}

.bluemap-container {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    > .map-canvas, .map-canvas-hud {
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;
    }

    > .map-canvas {
        background-color: #000;
        z-index: 0;
    }

    > .map-canvas-hud {
        pointer-events: none;

        z-index: 10;

        > * {
            pointer-events: auto;
        }
    }

    > .ui {
        display: flex;
        align-items: stretch;

        position: relative;

        width: 100%;
        height: 100%;

        pointer-events: none;

        z-index: 100;

        > * {
            pointer-events: auto;
        }

        > .menu {
            position: relative;

            flex-shrink: 0;
            z-index: 200;

            filter: drop-shadow(1px 1px 3px #0008);

            @media (max-width: $middle-max) {
                position: absolute;
            }
        }

        > .hud {
            position: relative;

            width: 100%;

            pointer-events: none;

            filter: drop-shadow(1px 1px 3px #0008);

            > * {
                pointer-events: auto;
            }
        }
    }
}

@import "ui/ui";
@import "ui/element";
@import "ui/toolbar";
@import "ui/menu";
@import "ui/button";
@import "ui/slider";
@import "ui/togglebutton";
@import "ui/separator";
@import "ui/dropdown";
@import "ui/label";
@import "ui/position";

@import "modules/hudInfo";
